<template>
  <div class="container">
    <div style="border-bottom:1px solid #ccc;padding-bottom:50px">
      <div class="card_title">
        <img src="~@/assets/report/first/edit.png" />
        <span>专家评估</span>
      </div>
      <div class="card_content">
        <div class="card_content">
          <div class="content">
            <div class="title"><img src="~@/assets/report/first/shenghuo.png" /> <span>生活方式方案</span></div>
            <div v-if="status == 0">
              <a-input
                v-model="report.lifeway"
                type="textarea"
                :maxLength="240"
                placeholder="请填写生活方式评估"
                :auto-size="{ minRows: 3, maxRows: 5 }"
              ></a-input>
              <div>
                <a
                  :style="{ display: 'inline-block', float: 'right', color: 'red' }"
                  @click="handleTemplateSave(report.lifeway)"
                >
                  保存到模版
                </a>
                <a
                  :style="{ display: 'inline-block', float: 'right', marginRight: '20px', color: 'red' }"
                  @click="handleTemplate(4)"
                >
                  从模版选择
                </a>
              </div>
            </div>
            <div v-else>
              <p>{{ report.lifeway }}</p>
            </div>
          </div>
        </div>
        <div class="content">
          <div class="title"><img src="~@/assets/report/first/yinshi2.png" /> <span>饮食方案</span></div>
          <div v-if="status == 0">
            <a-input
              v-model="report.diet"
              type="textarea"
              :maxLength="240"
              placeholder="请填写饮食评估"
              :auto-size="{ minRows: 3, maxRows: 5 }"
            ></a-input>
            <div>
              <a
                :style="{ display: 'inline-block', float: 'right', color: 'red' }"
                @click="handleTemplateSave(report.diet)"
              >
                保存到模版
              </a>
              <a
                :style="{ display: 'inline-block', float: 'right', marginRight: '20px', color: 'red' }"
                @click="handleTemplate(1)"
              >
                从模版选择
              </a>
            </div>
          </div>
          <div v-else>
            <p>{{ report.diet }}</p>
          </div>
        </div>
      </div>
      <div class="card_content">
        <div class="content">
          <div class="title"><img src="~@/assets/report/first/yongyao.png" /> <span>用药方案</span></div>
          <div v-if="status == 0">
            <a-input
              v-model="report.medical"
              type="textarea"
              :maxLength="240"
              placeholder="请填写用药评估"
              :auto-size="{ minRows: 3, maxRows: 5 }"
            ></a-input>
            <div>
              <a
                :style="{ display: 'inline-block', float: 'right', color: 'red' }"
                @click="handleTemplateSave(report.medical)"
              >
                保存到模版
              </a>
              <a
                :style="{ display: 'inline-block', float: 'right', marginRight: '20px', color: 'red' }"
                @click="handleTemplate(2)"
              >
                从模版选择
              </a>
            </div>
          </div>
          <div v-else>
            <p>{{ report.medical }}</p>
          </div>
        </div>
      </div>
      <div class="card_content">
        <div class="content">
          <div class="title"><img src="~@/assets/report/first/yundong.png" /> <span>运动方案</span></div>
          <div v-if="status == 0">
            <a-input
              v-model="report.sport"
              type="textarea"
              :maxLength="240"
              placeholder="请填写运动评估"
              :auto-size="{ minRows: 3, maxRows: 5 }"
            ></a-input>
            <div>
              <a
                :style="{ display: 'inline-block', float: 'right', color: 'red' }"
                @click="handleTemplateSave(report.sport)"
              >
                保存到模版
              </a>
              <a
                :style="{ display: 'inline-block', float: 'right', marginRight: '20px', color: 'red' }"
                @click="handleTemplate(3)"
              >
                从模版选择
              </a>
            </div>
          </div>
          <div v-else>
            <p>{{ report.sport }}</p>
          </div>
        </div>
      </div>
      <div class="card_content">
        <div class="content">
          <div class="title"><img src="~@/assets/report/first/product.png" /> <span>产品</span></div>
          <div v-if="status == 0">
            <div style="margin-bottom:20px">监测设备：</div>
            <a-checkbox-group :options="products1" v-model="report.monitoringEquipment"> </a-checkbox-group>
            <div style="margin-bottom:20px;margin-top:20px">营养餐包：</div>
            <a-checkbox-group :options="products2" v-model="report.nutritionPackage"> </a-checkbox-group>
          </div>
          <div v-else>
            <template v-if="report.monitoringEquipment">
              <div style="margin-bottom:20px">监测设备：</div>
              <p style="text-indent: 2em;" v-for="item in report.monitoringEquipment" :key="item">
                {{ item }}
              </p>
            </template>
            <template v-if="report.nutritionPackage">
              <div style="margin-bottom:20px;margin-top:20px">营养餐包：</div>
              <p style="text-indent: 2em;" v-for="item in report.nutritionPackage" :key="item">{{ item }}</p>
            </template>
          </div>
        </div>
      </div>
      <a-modal
        :visible="saveVisit"
        title="保存到模版"
        ref="saveVisit"
        width="500px"
        @ok="handleOk"
        @cancel="handleCancel"
        :confirm-loading="typeConfirmLoading"
      >
        <a-form-model ref="editform" :model="category" :rules="validatorRules">
          <a-form-model-item label="分类名称" :labelCol="{ span: 4 }" :wrapperCol="{ span: 8 }" prop="categoryType">
            <a-select placeholder="请选择分类" v-model="category.categoryType">
              <a-select-option v-for="item in list" :key="item.dataId" :value="item.dataId">{{
                item.categoryName
              }}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-form-model>
      </a-modal>
      <advise-template ref="modalForm" @ok="modalFormOk"></advise-template>
    </div>
  </div>
</template>

<script>
import { PAGE_MENU_TYPE } from '@/store/mutation-types'
import { mapGetters } from 'vuex'
import AdviseTemplate from '../../../bloodProfile/modules/AdviseTemplate'
import { postAction } from '@/api/manage'
export default {
  name: 'Expert',
  props: ['report', 'status'],
  components: { AdviseTemplate },
  data() {
    return {
      images: null,
      experts: 0,
      saveVisit: false,
      category: {},
      typeConfirmLoading: false,
      list: [],
      validatorRules: {
        categoryType: [{ required: true, message: '请选择分类' }]
      },
      products1: [],
      products2: []
    }
  },
  created() {
    this.handleGetTableData()
    this.getType()
  },
  methods: {
    ...mapGetters(['doctorId', 'orgCode']),
    handleTemplate(code) {
      this.experts = code
      this.$refs.modalForm.add()
    },
    getType() {
      postAction('/suggest/category/list', { orgCode: this.orgCode() }).then(res => {
        if (res.success) {
          this.list = res.result
        } else {
          console.log(res.message)
        }
      })
    },
    handleTemplateSave(content) {
      if (!content) {
        this.$message.warning('内容不能为空')
        return
      }
      this.category.suggestContent = content
      this.saveVisit = true
    },
    handleOk() {
      this.$refs.editform.validate(valid => {
        if (valid) {
          const params = {
            patientId: this.$route.query[PAGE_MENU_TYPE.PatientId],
            signinType: this.category.categoryType,
            suggestContent: this.category.suggestContent,
            orgCode: this.orgCode()
          }
          postAction('/201/02/2010219', params).then(res => {
            if (res.success) {
              this.$message.success(res.message)
              this.handleCancel()
            } else {
              this.$message.warning(res.message)
            }
          })
        }
      })
    },
    handleCancel() {
      this.saveVisit = false
    },
    handleGetTableData() {
      this.dataLoading = true
      postAction('/shop/product/page', {
        productCategory: this.activeId,
        doctorId: this.doctorId() || '0',
        orgCode: this.orgCode()
      })
        .then(res => {
          if (res.success) {
            this.products1 = res.result.records
              .filter(v => {
                return v.productCategory == 1
              })
              .map(v => {
                return {
                  label: v.productName,
                  value: v.productName
                }
              })
            this.products2 = res.result.records
              .filter(v => {
                return v.productCategory == 4
              })
              .map(v => {
                return {
                  label: v.productName,
                  value: v.productName
                }
              })
          } else {
            this.$message.warning(res.message)
          }
        })
        .finally(() => {
          this.dataLoading = false
        })
    },
    modalFormOk(item) {
      if (this.experts == 1) {
        this.report.diet = item
      } else if (this.experts == 2) {
        this.report.medical = item
      } else if (this.experts == 3) {
        this.report.sport = item
      } else if (this.experts == 4) {
        this.report.lifeway = item
      }
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  padding: 50px 24px 0 24px;
}
.card_title {
  display: flex;
  align-items: center;
  img {
    width: 25px;
    height: 25px;
    margin-right: 10px;
  }
  span {
    font-size: 20px;
    font-weight: bold;
    color: #000;
  }
}
.content {
  padding: 20px;
  .title {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  img {
    width: 25px;
    height: 25px;
    margin-right: 10px;
  }
  span {
    font-size: 16px;
    font-weight: bold;
    color: #000;
  }
}
.card_content {
  margin-top: 15px;
}
.form_item {
  line-height: 50px;
}
.card_label {
  margin-right: 10px;
  color: #000;
}
.card_value {
  color: rgba(0, 0, 0, 0.55);
}
</style>

